﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>导航菜单管理</title>
    <link href="../lib/layui/css/layui.min.css" rel="stylesheet" />
    <link href="../x-admin/css/font.css" rel="stylesheet" />
    <link href="../x-admin/css/xadmin.css" rel="stylesheet" />
    <script type="text/javascript" src="../lib/Base64/base64.min.js"></script>
    <script type="text/javascript" src="../linq.js/linq.js"></script>
    <script src="../lib/layui/layui.js"></script>
</head>
<body>
    <div class="layui-card">
        <form class="layui-form" id="navSearchForm" lay-filter="navSearchForm" style="padding-top:10px;">
            <div class="layui-form-item" style="margin-top:5px; margin-bottom:0;">
                <div class="layui-inline">
                    <div class="layui-input-block">
                        <input class="layui-input" name="name" type="text" placeholder="菜单名称(支持模糊匹配)" autocomplete="off" />
                    </div>
                </div>
                <div class="layui-input-inline layui-show-xs-block">
                    <select name="level" lay-filter="level">
                        <option value="">请选择</option>
                        <option value="1">一级</option>
                        <option value="2">二级</option>
                        <option value="3">三级</option>
                        <option value="4">四级</option>
                    </select>
                </div>
                <div class="layui-inline">
                    <a class="layui-btn" href="javascript:;" lay-submit lay-filter="load" id="load">搜索</a>
                </div>
            </div>
        </form>
        <table id="Navicattab" lay-filter="Navicattab"></table>

    </div>
    <script type="text/html" id="navtoolbar">
        <div class="layui-btn-container">
            <a class="layui-btn" lay-event="create">添加导航菜单</a>
        </div>
    </script>
    <script type="text/html" id="barnavicat">
        <a title="编辑" href="javascript:;" lay-event="edititem">
            <i class="layui-icon">&#xe642;</i>编辑
        </a>
        <!--<a title="删除" href="javascript:;" lay-event="delitem">
            <i class="layui-icon">&#xe640;</i>删除
        </a>-->
    </script>
    <script>
        layui.use('table', function () {
            var table = layui.table;
            //第一个实例
            $tab = table.render({
                elem: '#Navicattab'
                , url: localStorage.getItem('hosttingaddr') + '/api/main/getmenusnav' //数据接口
                , toolbar: '#navtoolbar'
                , page: true
                , cols: [[ //表头
                    { field: 'id', title: 'ID', width: 80, fixed: 'left', align: 'center' }
                    , { field: 'code', title: 'CODE', align: 'center' }
                    , { field: 'name', title: '名称', align: 'center' }
                    , { field: 'directory', title: '文件夹', align: 'center' }
                    , { field: 'parentId', title: '父ID', align: 'center' }
                    , { field: 'level', title: '层级', align: 'center' }
                    , { field: 'navicatFlag', title: '是否启用', align: 'center' }
                    , { field: 'img', title: '图标', align: 'center' }
                    , { field: 'href', title: '连接', align: 'center' }
                    , { field: 'index', title: '显示序号', align: 'center' }
                    , { field: 'note', title: '备注', align: 'center' }
                    , { fixed: 'right', title: '操作', align: 'center', toolbar: '#barnavicat' }
                ]]
                , where: getWhere()
            });
            //监听行工具事件
            table.on('tool(Navicattab)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                var fileN = data.path;
                if (layEvent == 'edititem') {
                    var iteminfo = btoa(window.encodeURIComponent(JSON.stringify(data)));
                    layer.open({
                        type: 2,
                        title: '模块导航内容',
                        maxmin: true,
                        shadeClose: true, //点击遮罩关闭层
                        area: ['900px', '800px'],
                        content: 'navicatedit.html' + '?id=' + data.id// iframe链接地址
                    });

                } else if (layEvent == 'delitem') {
                    layer.msg('暂不支持此功能');
                }
            });

            table.on('toolbar(Navicattab)', function (obj) {
                var event = obj.event;
                switch (event) {
                    case "create":
                        layer.open({
                            type: 2,
                            title: '模块导航内容',
                            maxmin: true,
                            shadeClose: true, //点击遮罩关闭层
                            area: ['900px', '800px'],
                            content: 'navicatcreate.html'
                        });
                        break;
                    default: break;
                }
            })

            //搜索按钮事件
            layui.form.on("submit(load)", function () {
                var where = getWhere();
                $tab.reload({
                    where: where,
                    page: { curr: 1 }
                });
                return false;
            });
            //搜索条件
            function getWhere() {
                var where = layui.form.val("navSearchForm");
                return where;
            }
        });
    </script>
</body>
</html>